
function banner(data , selector) {
    // 
    let timer = null ;
    // 播放第几张
    let index = 0 ;
    // 防止点击过快
    let flag = true ;

    let oBanner = document.querySelector(selector) ;
    const oUl = oBanner.querySelector('ul');
    const oOl = oBanner.querySelector('ol');


    // 提升作用域
    let oImgs , oDots ;

    // 1 先渲染
    render(data) ;

    // 2 自动播放
    autoPlay() ;

    // 3 事件
    bindEvent() ;


    function bindEvent() {
        // 事件委托
        oBanner.onclick = function(e) {
            // 上
            if(e.target.className === 'prev') {
                if(flag) {
                    flag = false ;
                    setTimeout(() => {
                        flag = true ;
                    } , 300)
                    clearInterval(timer) ;
                    if(index === 0) {
                        index = oImgs.length ;
                    }
                    index--;
                    show();
                    return ;
                }
            }
            // 下
            if(e.target.className === 'next') {
                if(flag) {
                    flag = false ;
                    setTimeout(() => {
                        flag = true ;
                    } , 300)
                    clearInterval(timer) ;
                    if(index === oImgs.length - 1) {
                        index = -1 ;
                    }
                    index++;
                    show();
                    return ;
                }
            }
            // 小点切换
            if(e.target.className === 'dot') {
                if(flag) {
                    flag = false ;
                    setTimeout(() => {
                        flag = true ;
                    } , 300)
                    clearInterval(timer) ;
                    // 此时不知道点击的是第几个 ---- 在初始化(render)给小点添加了自定义属性  index
                    index = e.target.getAttribute('index');
                    show();
                }
            }
        }

        // 鼠标移入移出
        oBanner.onmouseover = function() {
            clearInterval(timer) ;
        }
        oBanner.onmouseout = function() {
            autoPlay();
        }
    }





    function autoPlay() {
        timer = setInterval(() => {
            index++ ;
            if(index === oImgs.length) {
                index = 0 ;
            }
            show() ;
        },1000)
    }


    function show() {
        // 清除所有的show,给当前添加show
        oImgs.forEach((item , i) => {
            item.classList.remove('show') ;
            oDots[i].classList.remove('active');
        })
        oImgs[index].classList.add('show');
        oDots[index].classList.add('active');
    }




    // 默认生成图片和小点
    function render(data) {
        // 动态生成图片列表
        let imgHTML = '' ;
        data.forEach(item => {
            // 根据后端返回的字段显示的
            // console.log(item.picSrc);
            imgHTML += `
                <li>
                    <img src="${item.picSrc}" alt="">
                </li>
            `
        })
        oUl.innerHTML = imgHTML;
        oImgs = oUl.querySelectorAll('li') ;
        oImgs[0].classList.add('show');

        // 生成小点列表
        let dotHTML = '' ;
        data.forEach((item , i) => {
            dotHTML += `
                <li class="dot" index="${i}"></li>
            `
        })

        oOl.innerHTML = dotHTML;
        oDots = oOl.querySelectorAll('li') ;
        oDots[0].classList.add('active');
    }

}